<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>web04</title>
        <meta name="description" content="" />
        <meta name="author" content="Choongang31" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    </head>

    <body>
        <!--
        <div id="d">div 입니다 </div>
        script로 모든 Element에 접근할수 있습니다.
        .getElementById("아이디 ");
        .getElementsByTagName("태그이름 ");
        <img id="img1" width="50"
          src="http://image.zdnet.co.kr/2013/01/10/XeZ1eltAX15gzTth3HaL.jpg">
        <img id="img2" width="50"
          src="http://img.koreatimes.co.kr/upload/newsV2/images/article-squid_450.jpg">
        <img id="img3" width="50"
          src="http://img.koreatimes.co.kr/upload/newsV2/images/01-09-03-02.jpg">
        <img id="img4" width="50"
          src="http://img.koreatimes.co.kr/upload/newsV2/images/01-11-11-01.jpg"><br>
        <img id="big" src="55302.jpg">
        
          <button id="btn1">이미지 바꾸기 </button>
          -->
         <!-- <script>
             var d = document.getElementById("d");
             //alert(d.innerHTML);
             d.innerHTML="div 내용을 바꾸자 ";
             
             // alert(img1.src);
             //var original=img1.src;
             // var btn1 = document.getElementById("btn1");
             // btn1.onclick=function(){
                 // img1.src="55302.jpg";
             // } 
            //  var img2 = document.getElementById("img2");
            var img1 = document.getElementById("img1");
            var img2 = document.getElementById("img2");
            var img3 = document.getElementById("img3");
            var img4 = document.getElementById("img4");
            var big = document.getElementById("big");
             img1.onmouseover=function(){
                 big.src=img1.src;
             }
             img2.onmouseover=function(){
                 big.src=img2.src;
             }
             img3.onmouseover=function(){
                 big.src=img3.src;
             }
             img4.onmouseover=function(){
                 big.src=img4.src;
             }
         </script>  --> 
         
         <button id="left">왼쪽그림 </button>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <button id="right">오른쪽그림 </button>
         
         <div id="t">그림의 제목: </div>
         
         <img id="gallery">
         
         <script>
             var left=document.getElementById("left");
             var right=document.getElementById("right");
             var gallery=document.getElementById("gallery");
             var t=document.getElementById("t");
             images=["http://image.zdnet.co.kr/2013/01/10/XeZ1eltAX15gzTth3HaL.jpg",
             "http://img.koreatimes.co.kr/upload/newsV2/images/article-squid_450.jpg",
             "http://img.koreatimes.co.kr/upload/newsV2/images/01-09-03-02.jpg",
             "http://img.koreatimes.co.kr/upload/newsV2/images/01-11-11-01.jpg"];
             titles=["그림1","그림2","그림3","그림4"];
             var i=0;
             gallery.src=images[i];
             
             left.onclick=function(){
                 i--;if(i<0)i=images.length-1;
                 gallery.src=images[i];
                 t.innerHTML=titles[i];
             }
             right.onclick=function(){
                 i++;if(i>=images.length)i=0;
                 gallery.src=images[i];
                 t.innerHTML=titles[i];
             }
             //setInterval(펑션,시간);반복하기 
           //  setInterval(left.onclick,5000);
         </script>
         
         
         
     </body>
</html>
